<?xml version="1.0" encoding="UTF-8"?>

<ui:composition	xmlns="http://www.w3.org/1999/xhtml"
				xmlns:h="http://java.sun.com/jsf/html"
				xmlns:f="http://java.sun.com/jsf/core"
				xmlns:ui="http://java.sun.com/jsf/facelets"
				xmlns:a4j="http://richfaces.org/a4j"
				xmlns:rich="http://richfaces.org/rich"
				template="/template/mainLayout.xhtml">

	<ui:define name="body">	
	    <rich:tabPanel>
	        <rich:tab label="Registrar Ingresos y Descuentos">
	            <rich:panel style="width: 350px;">						
					<h:panelGrid border="0" cellpadding="0" cellspacing="2" columns="2" style="width: 240px; text-align: left;">
						<h:outputText value="Cod. Rubro:" escape="false" />
						<h:inputText id="rubroId" value="#{ingresoDescuentoJsfBean.persona.rubroId}" size="20" maxlength="15" />		
						<h:outputText value="Periodo:" escape="false" />
						<h:inputText id="periodo" value="#{ingresoDescuentoJsfBean.persona.periodo}" size="20" maxlength="15" />		
						<h:outputText value="Importe:" escape="false" />
						<h:inputText id="importe" value="#{ingresoDescuentoJsfBean.persona.importe}" size="20" maxlength="15" />
					</h:panelGrid>		
					<h:panelGrid border="0" cellpadding="0" cellspacing="2" columns="2" style="width: 200px; text-align: center;">
						<h:commandButton id="grabar" value="Crear" action="#{ingresoDescuentoJsfBean.crear}" />						
						<h:commandButton id="limpiar" value="Limpiar" action="#{ingresoDescuentoJsfBean.limpiar}" />
					</h:panelGrid> 
				</rich:panel>
	        </rich:tab>
	        <!-- Datos Consultar Ingresos y Descuentos -->
	        <rich:tab label="Consultar Ingresos y Descuentos">
	            <style>
				.col {
				    width: 100px;
				}
				</style>
			    <a4j:keepAlive beanName="dataScrollerBean" ajaxOnly="true"/>
			    <h:form>
			        <rich:datascroller align="left" for="carList" maxPages="20"
			            page="#{dataScrollerBean.scrollerPage}" reRender="sc2" id="sc1" />
			        <rich:spacer height="30" />
			        <rich:dataTable width="483" id="carList" rows="10" columnClasses="col"
			            value="#{dataTableScrollerBean.allCars}" var="category">
			            <f:facet name="header">
			                <rich:columnGroup>
			                    <h:column>
			                        <h:outputText styleClass="headerText" value="Make" />
			                    </h:column>
			                    <h:column>
			                        <h:outputText styleClass="headerText" value="Model" />
			                    </h:column>
			                    <h:column>
			                        <h:outputText styleClass="headerText" value="Price" />
			                    </h:column>
			                    <h:column>
			                        <h:outputText styleClass="headerText" value="Mileage" />
			                    </h:column>
			                </rich:columnGroup>
			            </f:facet>
			
			            <h:column>
			                <h:outputText value="#{category.make}" />
			            </h:column>
			            <h:column>
			                <h:outputText value="#{category.model}" />
			            </h:column>
			            <h:column>
			                <h:outputText value="#{category.price}" />
			            </h:column>
			            <h:column>
			                <h:outputText value="#{category.mileage}" />
			            </h:column>			
			        </rich:dataTable>
			        <rich:datascroller align="left" for="carList" maxPages="20"
			            page="#{dataScrollerBean.scrollerPage}" id="sc2" reRender="sc1" />
			    </h:form>
	        </rich:tab>	        
	    </rich:tabPanel>
	</ui:define>
</ui:composition>